<template>
  <div class="about-container">
    <!-- 背景图片 -->
    <img src="../../public/images/home-bg.jpg" alt="bg-image" class="w-screen fixed top-0 left-0 z-0 object-cover" />
    <!-- 顶部导航栏 -->
    <nav class="top-nav relative">
      <div class="container">
        <h1 class="text-6xl py-8 font-bold text-amber-500">趣味博物馆</h1>
        <ul class="nav-links text-5xl">
          <li><a href="/Home">主页</a></li>
          <li><a href="/Exhibitions">文物鉴赏</a></li>
          <li><a href="/Camera">互动体验</a></li>
          <li><a href="/About" class="active">关于我们</a></li>
        </ul>
      </div>
    </nav>
    <div class="flex-row">
      <!-- 意见反馈 -->
      <section class="feedback-section relative shadow-2xl rounded-2xl bg-white opacity-95 p-16 text-4xl">
        <div class="section-title">意见反馈</div>
        <form @submit.prevent="submitFeedback">
          <div class="form-group">
            <div class="flex items-center justify-between">
              <label for="username">您的用户名:</label>
              <el-icon>
                <Edit />
              </el-icon>
            </div>
            <input type="text" id="username" v-model="feedback.username" required>
          </div>
          <div class="form-group">
            <div class="flex items-center justify-between">
              <label for="feedbackContent">意见反馈内容:</label>
              <el-icon>
                <Edit />
              </el-icon>
            </div>
            <textarea id="feedbackContent" v-model="feedback.content" required></textarea>
          </div>
          <button type="submit">提交</button>
        </form>
      </section>
      <!-- 我们的团队 -->
      <section class="team-section relative shadow-2xl rounded-2xl bg-white opacity-95 p-16 text-4xl">
        <div class="flex items-center">
          <div class="section-title">我们的团队</div>
        </div>
        <div class="team-members">
          <div class="team-member" v-for="member in teamMembers" :key="member.name">
            <h3>{{ member.name }}</h3>
            <p>{{ member.major }}</p>
          </div>
        </div>
      </section>
      <!-- 项目介绍 -->
      <section class="project-introduction relative shadow-2xl rounded-2xl bg-white opacity-95 p-16 text-4xl">
        <div class="section-title">项目介绍</div>
        <div class="features">
          <div class="feature" v-for="feature in features" :key="feature.title">
            <h3>{{ feature.title }}</h3>
            <p class="leading-relaxed">{{ feature.description }}</p>
          </div>
        </div>
      </section>
      <!-- 项目详细信息 -->
      <section class="project-details relative shadow-2xl rounded-2xl bg-white opacity-95 p-16 text-4xl">
        <div class="section-title">项目详细信息</div>
        <div class="detail-cards">
          <div class="detail-card" v-for="detail in details" :key="detail.title">
            <h3>{{ detail.title }}</h3>
            <p class="leading-relaxed">{{ detail.content }}</p>
          </div>
        </div>
      </section>
      <!-- 联系方式 -->
      <section class="relative shadow-2xl rounded-2xl bg-white opacity-95 p-16 text-4xl">
        <div class="section-title">联系方式</div>
        <div class="contact-item">
          <p class="text-4xl mb-10">电话：19518102337</p>
          <p class="text-4xl">邮箱：nizhangchi@stu.ynu.edu.cn</p>
        </div>
      </section>
    </div>
    <!-- 底部版权信息区 -->
    <footer class="bg-black-800 p-4 relative  text-white text-center text-4xl">
      &copy; {{ currentYear }} 趣味博物馆项目组. 保留所有权利。
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const currentYear = ref(new Date().getFullYear());
const feedback = ref({
  username: '',
  content: ''
});

const teamMembers = ref([
  { name: '刘蔚杰', major: '软件工程' },
  { name: '熊佳馨', major: '网络空间安全' },
  { name: '倪张弛', major: '软件工程' },
  { name: '左欣禾', major: '数字媒体技术' },
]);

const features = ref([
  { title: '点绘奇趣', description: '用户可以通过触摸屏幕，与文物进行互动，了解文物背后的故事和历史。' },
  { title: '指舞旋律', description: '通过手势识别技术，用户可以在空中“指挥”音乐，体验古代乐器的演奏乐趣。' },
  { title: '智能扫脸入馆', description: '利用人脸识别技术，简化入馆流程，提升用户体验。' },
  { title: '盲盒式展览', description: '通过随机展示文物，增加展览的趣味性和互动性。' },
]);

const details = ref([
  { title: '人机交互的理解', content: '人机交互是研究人与计算机之间交流和互动的领域。在我们的项目中，我们通过触摸、手势识别等新型交互技术，增强用户与文物之间的互动，提升用户体验。' },
  { title: '新型人机交互技术', content: '我们的项目采用了多种新型人机交互技术，包括触摸屏幕、手势识别、人脸识别等，这些技术使得用户能够以更自然、直观的方式与文物互动。' },
  { title: '项目的可行性', content: '我们的项目基于现有的技术基础，结合了软件工程、网络空间安全、数字媒体技术等专业知识，确保了项目的可行性和安全性。' },
  { title: '项目的设计理念', content: '我们的设计理念是“互动、体验、教育”，通过创新的技术手段，让用户在互动中学习，在体验中感受文化的魅力。' },
  { title: '项目的框架', content: '项目的框架包括前端展示层、后端服务层和数据库层。前端负责用户交互，后端处理业务逻辑，数据库存储文物信息。' },
]);

const submitFeedback = () => {
  console.log('提交反馈:', feedback.value);
  // 这里可以添加发送反馈的逻辑
};

</script>

<style scoped>
/* 基础样式 */
.about-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-nav {
  background-color: #333;
  color: white;
  padding: 10px 0;
  width: 100%;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: auto;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin: 0 10px;
}

.nav-links a {
  color: #FFDEAD;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
  color: #DAA520; /* 金色 */
}

.section-title {
  font-size: 64px;
  font-weight: bold;
  color: #DAA520;
  margin-bottom: 60px;
  margin-top: 10px;
}

/* 意见反馈样式 */
.feedback-section, .team-section, .project-introduction, .project-details{
  max-width: 1600px;
  width: 100%;
  margin-bottom: 40px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background-color: #DAA520;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #FFDEAD;
}

/* 团队成员样式 */
.team-members {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.team-member {
  border: 1px solid #6b3e15;
  border-radius: 5px;
  padding: 10px;
  width: calc(25% - 20px);
  text-align: center;
}

/* 项目介绍样式 */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.feature {
  border: 1px solid #6b3e15;
  border-radius: 5px;
  padding: 20px;
  width: calc(50% - 20px);
}

/* 项目详细信息样式 */
.detail-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.detail-card {
  border: 1px solid #6b3e15;
  border-radius: 5px;
  padding: 20px;
  width: calc(33.333% - 20px);
}

/* 联系方式样式 */
.contact-item {
  max-width: 1000px;
  width: 100%;
}

/* 底部信息样式 */
footer {
  text-align: center;
  padding: 10px 0;
  background-color: #333;
  color: white;
  width: 100%;
}
h3 {
  font-weight: bolder;
  font-size: 45px;
  padding-bottom: 14px;
}
</style>